<template>
	<div class="container" @click = "handleGallaryClick"> 
		<div class="wrapper">
			<swiper :options="swiperOption">
				<!-- slides -->
				<swiper-slide
				 v-for ="(item,index) of imgs"
				 :key = "index"
				 ><img class="gallary-img" :src="item" /></swiper-slide>	
				<!-- Optional controls -->
				<div class="swiper-pagination"  slot="pagination"></div> 
			</swiper>
		</div>
	</div>
</template>
<script>	
	export default {
		name : "CommonGallary",
		props:{
			imgs:{
				type:Array,
				default:function(){
					return []
				}
			}
		},
		data:function(){
			return {
				swiperOption:{
					pagination:'.swiper-pagination',
					paginationType:'fraction',
					observeParents:true,//监听swiper dom结构变化 会刷新
					observer:true
				}				
			}
		},
		methods:{
			handleGallaryClick:function(){
				this.$emit('close')
			}
		}
			
	}
</script>
<style lang="stylus" scoped>
	.container >>> .swiper-container {
		overflow: inherit;
	}
	.container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		z-index: 99;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: #000;
	}
	.wrapper {
		width: 100%;
		height: 0;
		padding-bottom: 100%;
		//overflow: hidden;
		
	}
	.gallary-img {
		width: 100%;
	}
	.swiper-pagination {
		color: #fff;
		bottom: -1rem;
	}
</style>